<template>
  <view class="view-switcher">
    <view 
      class="icon-btn" 
      :class="{ active: currentView === 'grid' }" 
      @tap="switchView('grid')"
    >
      <view class="grid-icon"></view>
    </view>
    <view 
      class="icon-btn" 
      :class="{ active: currentView === 'list' }" 
      @tap="switchView('list')"
    >
      <view class="list-icon"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ViewSwitcher',
  props: {
    currentView: {
      type: String,
      required: true
    }
  },
  methods: {
    switchView(view) {
      this.$emit('switch', view);
    }
  },
  emits: ['switch']
}
</script>

<style>
.view-switcher {
  display: flex;
  align-items: center;
}

.icon-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
  background-color: #FFFFFF;
}

.icon-btn.active {
  background-color: #7766E7;
}

.grid-icon {
  width: 24rpx;
  height: 24rpx;
  position: relative;
}

.grid-icon:before, .grid-icon:after {
  content: "";
  position: absolute;
  background-color: #333333;
}

.grid-icon:before {
  width: 10rpx;
  height: 10rpx;
  top: 0;
  left: 0;
  box-shadow: 14rpx 0 0 0 #333333, 0 14rpx 0 0 #333333, 14rpx 14rpx 0 0 #333333;
}

.active .grid-icon:before {
  background-color: #FFFFFF;
  box-shadow: 14rpx 0 0 0 #FFFFFF, 0 14rpx 0 0 #FFFFFF, 14rpx 14rpx 0 0 #FFFFFF;
}

.list-icon {
  width: 24rpx;
  height: 24rpx;
  position: relative;
}

.list-icon:before {
  content: "";
  position: absolute;
  width: 24rpx;
  height: 4rpx;
  background-color: #333333;
  top: 4rpx;
  left: 0;
  box-shadow: 0 8rpx 0 0 #333333, 0 16rpx 0 0 #333333;
}

.active .list-icon:before {
  background-color: #FFFFFF;
  box-shadow: 0 8rpx 0 0 #FFFFFF, 0 16rpx 0 0 #FFFFFF;
}
</style>